import React, { Component } from "react";
import { Layout, Menu } from "antd";
import {
  UserDeleteOutlined,
  HomeTwoTone,
  MehTwoTone,
  SettingTwoTone,
  AccountBookTwoTone,
  SmileTwoTone,
  HeartTwoTone,
  CheckCircleTwoTone,
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import navList from "../router/leftNav";
import logo from "../assets/logo.jpg";
// ------------
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
// -----
const icon = {
  HomeTwoTone: <HomeTwoTone />,
  MehTwoTone: <MehTwoTone />,
  AccountBookTwoTone: <AccountBookTwoTone />,
  SettingTwoTone: <SettingTwoTone />,
  UserDeleteOutlined: <UserDeleteOutlined />
};
// --------------
class IndexPage extends Component {
  rootSubmenuKeys = ["首页", "我的", "新房", "交易", "设置","会员"];
  state = {
    openKeys: [],
  };
  // 动态渲染左侧导航
  nav = (list) => {
    return list.map((item) => {
      if (item.children) {
        return (
          <SubMenu
            key={item.name}
            title={
              <span>
                {icon[item.iconName]}
                {item.name}
              </span>
            }
          >
            {this.nav(item.children)}
          </SubMenu>
        );
      } else {
        if (item.name === "首页") {
          return (
            <Menu.Item key={item.name}>
              {icon[item.iconName]}
              <NavLink to={item.path}>{item.name}</NavLink>
            </Menu.Item>
          );
        } else {
          return (
            <Menu.Item key={item.name}>
              <NavLink to={item.path}>{item.name}</NavLink>
            </Menu.Item>
          );
        }
      }
    });
  };
  // 点击一级菜单的展开和收起
  onOpenChange = (openKeys) => {
    // console.log(this.props);
    const latestOpenKey = openKeys.find(
      (key) => this.state.openKeys.indexOf(key) === -1
    );
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  };
  render() {
    return (
      <Layout style={{ height: "100vh", backgroundColor: "#506DF5" }}>
        <Sider>
          {/* logo */}
          <div
            style={{
              backgroundColor: "#fff",
              display: "flex",
              justifyContent: "center",
            }}
          >
            <img
              src={logo}
              alt=""
              style={{
                height: "10vh",
                borderRadius: "50%",
                margin: "auto",
              }}
            />
          </div>
          {/* menu */}
          <Menu
            style={{
              height: "90vh",
            }}
            defaultSelectedKeys={["首页"]}
            mode="inline"
            openKeys={this.state.openKeys}
            onOpenChange={this.onOpenChange}
          >
            {this.nav(navList)}
          </Menu>
        </Sider>
        <Layout
          style={{
            borderRadius: "2%",
            height: "98%",
            margin: "auto",
          }}
        >
          <Header style={{ width: "100vw", background: "#fff" }}>
            <div className="icons-list">
              <SmileTwoTone />
              <HeartTwoTone twoToneColor="#eb2f96" />
              <CheckCircleTwoTone twoToneColor="#52c41a" />
              
            </div>
          </Header>
          <Content style={{ margin: "16px" }}>
            <div
              style={{
                padding: 24,
                background: "#fff",
                margin: "auto",
                minHeight: "98%",
              }}
            >
              {this.props.children}
            </div>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default IndexPage;
